/* 
==================== 公共样式(项目特有样式) ====================
(注: 必须同时引用'var.wxss'和'init.wxss')
目录(ctrl+F):
  ※页面 page
  ※自定义组件 zj-xxxxx
  ※项 my__item
  ※区域 my__area
  ※标签 my__tag
  ※提示信息 my__tip
  ※时间段中间的线 my__timeLine
  ※绝对定位按钮的占位区域 my__btnperch
*/

// ========== ※页面 my__page ==========
page{
  background-color: var(--color_bg);
  border-top: 4rpx solid var(--color_bg);
  >view,
  .my__page{
    height: 100%; width: 100%;
    position: relative;
    overflow: auto;
  }
}

// ========== ※自定义组件 zj-xxxxx ==========
zj-input, zj-select, zj-selectDate{
  height: var(--height_form);
  width: 100%;
  // padding: 0 .5em; // 加padding时禁用样式显示的不太好
}
zj-select-complex{
  min-height: var(--height_form);
  width: 100%;
}
zj-textarea{
  min-height: calc(var(--height_form) * 2);
  width: 100%;
}

// ========== ※项 ==========
/* 目录(ctrl+F):
  ※1_普通项: my__item (注: 一定要看'@mixin item', 里面还有一些设定)
  ※1_无背景项: my__item-nobg (注: 默认没有上下padding)
  ※1_文本项: my__item-text
  ※1_筛查项: my__item-screen (注: 一般用在筛选区域)
  ※1_表单项: my__item-form
*/

@mixin item{
  height: auto;
  min-height: var(--height_item);
  background-color: #fff;
  border-bottom: var(--line1);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: calc(var(--space) / 2) var(--space);
  text-align: left;
  font-size: var(--fontSize);
  color: var(--font_color);
  position: relative;
  &.NoP_T{ padding-top: 0; }
  &.NoP_B{ padding-bottom: 0; }
  &.NoP_L{ padding-left: 0; }
  &.NoP_R{ padding-right: 0; }
  &.P_T{ padding-top: calc(var(--space) / 2); }
  &.P_B{ padding-bottom: calc(var(--space) / 2); }
  &.P_L{ padding-left: var(--space); }
  &.P_R{ padding-right: var(--space); }
  >.W_shrink{ flex-shrink: 0; }
  >.W_flex{ flex: 1; overflow: hidden; }
  >.W_100{ width: 100%; }
  >image{
    height: 1.2em;
    width: 1.2em;
    margin-right: calc(var(--space) / 2);
    flex-shrink: 0;
  }
  >text{
    line-height: 1.6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  >view{
    line-height: 1.6;
    white-space: normal;
  }
  >.stronge{
    color: var(--font_color_d);
    align-self: flex-start;
    flex-shrink: 0;
  }
  >.my__icon-arrow_right{
    font-size: 1.2em;
    flex-shrink: 0;
  }
}

// ===== ※1_普通项 =====
.my__item{ @include item; }

// ===== ※1_无背景项 =====
.my__item-nobg{
  @include item;
  min-height: auto;
  background-color: transparent;
  border-bottom: 0;
  padding: 0 var(--space);
}

// ===== ※1_文本项 =====
.my__item-text{
  @include item;
  min-height: auto;
  background-color: transparent;
  border-bottom: 0;
  padding: 0;
}

// ===== ※1_筛查项 =====
.my__item-screen{
  @include item;
  min-height: auto;
  border-bottom: 0;
  padding-bottom: 0;
  >.stronge{ line-height: var(--height_form); }
  >.my__btn-font{ margin-left: var(--space) }
  >.formEl{
    background-color: var(--color_bg);
    padding: 0 var(--space);
    border-radius: var(--height_form)
  }
}

// ===== ※1_表单项 =====
.my__item-form{
  @include item;
  >.stronge{
    width: 5.5em;
    line-height: var(--height_form);
  }
}

// ========== ※区域 ==========
/* 目录(ctrl+F):
  ※1_普通区域: my__area
  ※1_标题区域: my__area-title (注: 最前面有绿色装饰竖条)
  ※1_表单区域: my__area-form
  ※1_按钮区域: my__area-btn
  ※1_列表区域: my__area-list (注: 一般用在刷新加载区域)
  ※1_弹窗区域: my__area-dialog
*/

// ===== ※1_普通区域 =====
.my__area{ background-color: #fff; }

// ===== ※1_标题区域 =====
.my__area-title{
  height: var(--height_text);
  display: flex;
  align-items: center;
  padding: 0 var(--space);
  font-size: var(--fontSize_b1);
  color: var(--font_color_d);
  &::before{
    content: '';
    display: block;
    height: .9em;
    width: 6rpx;
    margin-top: .05em;
    background-color: #14c466;
    margin-right: .4em;
  }
  &+.my__area-form,
  &+.my__area-text,
  &+.my__area-list{ margin-top: 0; }
}

// ===== ※1_表单区域 =====
.my__area-form{
  background-color: #fff;
  border: var(--line1);
  margin: calc(var(--space) / 2) var(--space);
  >view:last-child{ border-bottom: 0; }
}

// ===== ※1_表单区域 =====
.my__area-text{
  background-color: #fff;
  border: var(--line1);
  margin: calc(var(--space) / 2) var(--space);
  padding: calc(var(--space) / 2) var(--space);
  >view{ margin-bottom: calc(var(--space) / 2); }
  >view:last-child{ margin-bottom: 0; }
}

// ===== ※1_按钮区域 =====
.my__area-btn{
  display: flex;
  flex-wrap: wrap;
  margin: calc(var(--space) * 2) var(--space) calc(var(--space) / 2);
  >button{
    flex: 1;
    overflow: hidden;
    margin-right: var(--space);
    &:last-child{ margin-right: 0; }
  }
}

// ===== ※1_列表区域 (刷新加载区域) =====
.my__area-list{
  width: 100%;
  box-sizing: border-box;
  margin-top: calc(var(--space) / 2);
}

// ===== ※1_弹窗区域 =====
.my__area-dialog{
  max-height: 50vh;
  width: 100%;
  overflow: auto;
  padding: calc(var(--space) / 2) var(--space);
  >.my__item-form{
    background-color: var(--color_bg);
    padding: calc(var(--space) / 2);
    margin-bottom: 4rpx;
    &:last-child{ margin-bottom: 0; }
  }
}


// ========== ※标签 ==========
@mixin tag{
  font-size: 12px;
  height: 20px;
  padding: 0 .5em;
  border-radius: 12px;
  border: 2rpx solid;
  display: flex;
  align-items: center;
  justify-content: center;
}
.my__tag{
  @include tag;
  // border: 2px solid var(--color_adorn1);
  border-color: var(--color_adorn1);
  color: var(--color_adorn1);
}
.my__tag_red{
  @include tag;
  // border: 2px solid var(--color_red);
  border-color: var(--color_red);
  color: var(--color_red);
}

// ========== ※提示信息 ==========
.my__tip{
  height: 24px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  // justify-content: flex-start;
}

// ========== ※时间段中间的线 ==========
.my__timeLine{
  display: block;
  height: 4rpx;
  width: .5em;
  background-color: #ddd;
}

// ========== ※绝对定位按钮的占位区域 ==========
.my__btnperch{
  height: calc(var(--height_button) + var(--space));
}